<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>负载均衡测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .btn {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        .btn-blue {
            background-color: #2196F3;
        }
        .btn-orange {
            background-color: #FF9800;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }
        #result {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .new-feature {
            background-color: #ffeb3b;
            color: #333;
            font-size: 12px;
            padding: 2px 5px;
            border-radius: 3px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <h1>负载均衡测试页面</h1>
    
    <div class="card">
        <h2>测试直接负载均衡调用</h2>
        <p>使用@LoadBalanced注解的RestTemplate直接通过服务名调用</p>
        <button id="testDirectBtn" class="btn">测试直接调用</button>
        <button id="testDirectTextBtn" class="btn btn-blue">测试文本调用</button>
    </div>
    
    <div class="card">
        <h2>测试手动负载均衡调用</h2>
        <p>使用LoadBalancerClient手动选择服务实例</p>
        <button id="testManualBtn" class="btn">测试手动调用</button>
        <button id="testManualTextBtn" class="btn btn-blue">测试文本调用</button>
    </div>
    
    <div class="card">
        <h2>查看服务实例</h2>
        <p>查看当前注册的服务实例列表</p>
        <button id="listInstancesBtn" class="btn">查看实例列表</button>
        <button id="listInstancesLbBtn" class="btn btn-orange">查看实例列表(负载均衡) <span class="new-feature">新</span></button>
    </div>
    
    <div class="card">
        <h2>多次测试负载均衡效果</h2>
        <p>连续多次调用，观察负载均衡效果</p>
        <button id="multipleTestBtn" class="btn">连续调用5次</button>
        <input type="number" id="callCount" min="1" max="20" value="5" style="width: 60px; margin-left: 10px;">
    </div>
    
    <div class="card">
        <h2>结果</h2>
        <pre id="result">点击上方按钮测试负载均衡效果...</pre>
    </div>
    
    <script>
        document.getElementById('testDirectBtn').addEventListener('click', function() {
            fetch('/api/demo/direct')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    document.getElementById('result').textContent = '错误: ' + error;
                });
        });
        
        document.getElementById('testDirectTextBtn').addEventListener('click', function() {
            fetch('/api/demo/direct/text')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('result').textContent = data;
                })
                .catch(error => {
                    document.getElementById('result').textContent = '错误: ' + error;
                });
        });
        
        document.getElementById('testManualBtn').addEventListener('click', function() {
            fetch('/api/demo/balance')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    document.getElementById('result').textContent = '错误: ' + error;
                });
        });
        
        document.getElementById('testManualTextBtn').addEventListener('click', function() {
            fetch('/api/demo/text')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('result').textContent = data;
                })
                .catch(error => {
                    document.getElementById('result').textContent = '错误: ' + error;
                });
        });
        
        document.getElementById('listInstancesBtn').addEventListener('click', function() {
            fetch('/api/demo/instances')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    document.getElementById('result').textContent = '错误: ' + error;
                });
        });
        
        document.getElementById('listInstancesLbBtn').addEventListener('click', function() {
            fetch('/api/demo/instances-lb')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    document.getElementById('result').textContent = '错误: ' + error;
                });
        });
        
        document.getElementById('multipleTestBtn').addEventListener('click', function() {
            const count = document.getElementById('callCount').value;
            fetch('/api/demo/multiple?count=' + count)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    document.getElementById('result').textContent = '错误: ' + error;
                });
        });
    </script>
</body>
</html> 